<template>
  <div>
    <el-button type="primary" size="medium" @click="centerDialogVisible = true">新增</el-button>
    <el-table :data="tableData" border style="width: 100%" v-fit-columns>
      <el-table-column prop="id" label="ID" align='center'>
      </el-table-column>
      <el-table-column prop="name" label="达人名称" align='center'>
      </el-table-column>
      <el-table-column prop="talent_introduce" label="达人类型" align='center'>
      </el-table-column>
      <el-table-column label="头像" align='center'>
        <div slot-scope="scope">
          <img :src="scope.row.avatar" style="height: 50px;width:50px;border-radius: 50%;" />
        </div>

      </el-table-column>
      <el-table-column label="操作" align='center'>
        <template slot-scope="scope">

          <el-button type="success" size='small' @click="handleChange(scope.row)">编辑</el-button>
          <el-popconfirm title="这是一段内容确定删除吗？" @onConfirm='delUser(scope.row)'>
            <el-button slot="reference" type="success" size='small' style="margin-left: 10px;">删除
            </el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
      @pagination="getList" />


    <!-- //新增管理原 -->
    <el-dialog title="新建达人" :visible.sync="centerDialogVisible" width="50%" center>
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="达人名称" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="达人类型" prop="talent_introduce">
          <el-input v-model="ruleForm.talent_introduce"></el-input>
        </el-form-item>
        <el-form-item label="上传头像">
           <el-upload

             list-type="picture-card"
             :action='uploadUrl'
             :headers='header'
             :show-file-list="false"
             :on-preview="handlePictureCardPreview"
             :on-success="handleAvatarSuccess"
             >
             <el-button size="small" type="primary">点击上传</el-button>
            <el-dialog :visible.sync="dialogVisible2">
              <img width="100%" :src="dialogImageUrl" alt="">
            </el-dialog>
           </el-upload>
        </el-form-item>

        <!-- <el-form-item label="手机号" prop="phone">
          <el-input v-model="ruleForm.phone"></el-input>
        </el-form-item> -->
        <div id="chose" style="width: 100%;margin: 0 auto;text-align: center;">
          <el-button type="primary" @click="submitForm()">创建</el-button>

          <el-button type="danger" @click="resetruleForm()">取 消</el-button>
        </div>
      </el-form>
    </el-dialog>
    <!-- //编辑管理员 -->
    <el-dialog title='编辑信息' :visible.sync="changeDialogVisible" width="50%" center>
      <el-form :model="changeForm" :rules="rules" ref="changeForm" label-width="100px" class="demo-ruleForm">
       <el-form-item label="达人名称" prop="name">
         <el-input v-model="ruleForm.name"></el-input>
       </el-form-item>
       <el-form-item label="达人类型" prop="talent_introduce">
         <el-input v-model="ruleForm.talent_introduce"></el-input>
       </el-form-item>
       <el-form-item label="上传头像">
          <el-upload

            :action='uploadUrl'
            :headers='header'
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            >
            <img v-if="ruleForm.avatar" :src="ruleForm.avatar" class="avatar">
            <i v-else class="el-icon-plus"></i>
          </el-upload>
       </el-form-item>
        <!-- <el-form-item label="手机号" prop="phone">
          <el-input v-model="ruleForm.phone"></el-input>
        </el-form-item> -->
        <div id="chose" style="width: 100%;margin: 0 auto;text-align: center;">
          <el-button type="primary" @click="submitchangeForm()">确认修改</el-button>

          <el-button type="danger" @click="changeDialogVisible = false;">取 消</el-button>
        </div>
      </el-form>
    </el-dialog>
  </div>

</template>

<script>
  import { httphost } from '@/utils/global'
  import {
    talentList,
    addTalent,
    changeTalent,
    delTalent
  } from "@/api/talent"
  import {
    getToken
  } from '@/utils/auth'
  import Pagination from '@/components/Pagination/index'
  export default {
    components: {
      Pagination
    },
    created() {
      const token = getToken()
      this.getList(token)
    },
    data() {
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          if (this.ruleForm.checkPass !== '') {
            this.$refs.ruleForm.validateField('checkPass');
          }
          callback();
        }
      };
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.ruleForm.pass) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      return {
        dialogImageUrl:'',
        uploadUrl:httphost+'admin/uploadPhoto',
        dialogVisible: false,
        dialogVisible2: false,
        disabled: false,
        changeId: '', //修改需要的id
        option: '', //权限列表
        visible: true,
        tableData: [], //渲染的表单数据
        total: 100, //总页数
        listQuery: {
          page: 1, //当前页
          limit: 2, //每页显示的条数
        },
        centerDialogVisible: false,
        changeDialogVisible: false,
        checkPass: '',
        ruleForm: {
          //提交的数据
        name:'',
        talent_introduce:'',
        avatar:''
        },
        changeForm: {
          //修改的数据

          username: '',
          role_id: '',
          phone: ''
        },
        rules: {
          //输入框验证规则
          nameR: [{
            min: 3,
            max: 5,
            message: '长度在 3 到 5 个字符',
            trigger: 'blur'
          }],
          pass: [{
            validator: validatePass,
            trigger: 'blur'
          }],
          checkPass: [{
            validator: validatePass2,
            trigger: 'blur'
          }],

        }
      }
    },

    computed: {
      // changeUser:function(){
      //   return `编辑${this.changeUser}信息`
      // }
      header(){
        return{
          'Authorization':'Bearer '+getToken()
        }
      }

    },
    methods: {
      // uploadPhoto(token){
      //   this.listLoading = true
      //   uploadPhotoF(token).then(res=>{
      //     if(res.code===200){
      //       this.ruleForm.avatar=res.data.url
      //       this.loading = false;
      //     }else{
      //       this.$message.error(res.msg);
      //       this.loading = false;
      //     }
      //   }),

  handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible2 = true;
      },
      //上传头像方法
handleAvatarSuccess(res){
  console.log(res)
},

      //分页方法
      handleSizeChange(val) {
        this.page.size = val
        this.getList(getToken())
      },
      handleCurrentChange(val) {
        this.page.current = val
        this.getList(getToken())
      },
      //删除管理员
      delUser(row) {
        delTalent(row.id).then(res => {

          if (res.code == 200) {
            this.$message.success('删除成功');
            this.getList(getToken())
          } else {
            this.$message.error(res.msg);
            this.loading = false;
          }
        })

      },
      //传id
      handleChange(row) {
        console.log(row)
        this.changeId = row.id
        this.changeForm.username = row.username
        this.changeDialogVisible = true
      },
      //修改信息方法
      submitchangeForm() {
        this.listLoading = true
        changeTalent((JSON.stringify(this.changeForm)), this.changeId).then(res => {
          if (res.code == 200) {
            this.$message.success('修改成功');
            this.getList(getToken())
            this.changeDialogVisible = false
          } else {
            this.$message.error(res.msg);
            this.loading = false;
          }

          // Just to simulate the time of the request
          setTimeout(() => {
            this.listLoading = false
          }, 1.5 * 1000)
        })
        console.log('提交成功')
      },

      handleClick(row) {
        console.log(row)
      },

      getList(token) {
        this.listLoading = true
        talentList(token).then(res => {

          this.tableData = res.data.data
          console.log(res)
          // Just to simulate the time of the request
          setTimeout(() => {
            this.listLoading = false
          }, 1.5 * 1000)
        })
      },
      submitForm() {
        this.listLoading = true
        console.log('提交的信息', this.ruleForm)
        this.resetruleForm()
        addTalent(JSON.stringify(this.ruleForm)).then(res => {

          if (res.code == 200) {
            this.getList(getToken())
            this.centerDialogVisible = false;
            this.$message.success('添加成功');
          } else {
            this.$message.error(res.msg);
            this.loading = false;
          }


          // Just to simulate the time of the request
          setTimeout(() => {
            this.listLoading = false
          }, 1.5 * 1000)
        })
        console.log('提交成功')
      },

      resetruleForm() {
        this.centerDialogVisible = false;
      }

    },

  }
  //  import { adminList } from "@/api/admin"
  //  import { getToken } from '@/utils/auth'
  //  export default {
  // created() {
  //   const token= getToken()
  //    this.getList(token)
  //  },
  //    data() {
  //      return {
  //        tableData:[
  //          {
  //            id:"id",
  //            username:"1111",
  //            avatar:"222",
  //            updated_at:"3333"
  //          }
  //        ],
  //      }
  //    },
  //    methods:{
  //      getList(token) {
  //        this.listLoading = true
  //        adminList(token).then(response => {

  //          // this.tableData=response.data.data
  //          console.log(this.tableData)
  //          // Just to simulate the time of the request
  //          setTimeout(() => {
  //            this.listLoading = false
  //          }, 1.5 * 1000)
  //        })
  //      },
  //    }
  //  }
</script>
<style lang="scss" scoped>
 @import "~@/styles/mixin.scss";
 .upload-container {
   width: 100%;
   position: relative;
   @include clearfix;
   .image-uploader {
     width: 35%;
     float: left;
   }
   .image-preview {
     width: 200px;
     height: 200px;
     position: relative;
     border: 1px dashed #d9d9d9;
     float: left;
     margin-left: 50px;
     .image-preview-wrapper {
       position: relative;
       width: 100%;
       height: 100%;
       img {
         width: 100%;
         height: 100%;
       }
     }
     .image-preview-action {
       position: absolute;
       width: 100%;
       height: 100%;
       left: 0;
       top: 0;
       cursor: default;
       text-align: center;
       color: #fff;
       opacity: 0;
       font-size: 20px;
       background-color: rgba(0, 0, 0, .5);
       transition: opacity .3s;
       cursor: pointer;
       text-align: center;
       line-height: 200px;
       .el-icon-delete {
         font-size: 36px;
       }
     }
     &:hover {
       .image-preview-action {
         opacity: 1;
       }
     }
   }
   .image-app-preview {
     width: 320px;
     height: 180px;
     position: relative;
     border: 1px dashed #d9d9d9;
     float: left;
     margin-left: 50px;
     .app-fake-conver {
       height: 44px;
       position: absolute;
       width: 100%; // background: rgba(0, 0, 0, .1);
       text-align: center;
       line-height: 64px;
       color: #fff;
     }
   }
 }
</style>
